<template>
  <div class="recommend">
    <zeroHeader :zerotitle="zerotitle"></zeroHeader>

    <!-- 选项卡组件 -->
    <zeroTabbar :tabbar="tabbar" :tabbar_detail="tabbar_detail" @topcat="topcat"></zeroTabbar>
  </div>
</template>

<script>
import BScroll from "better-scroll";
import zeroHeader from "@/components/ZeroHeader.vue";
import zeroTabbar from "@/components/ZeroTabbar.vue";
export default {
  name: "recommend",
  data() {
    return {
      zerotitle: "歌单广场",
      showspinner: false,
      tabbar: [],
      tabbar_detail: []
    };
  },
  methods: {
    //  初始化页面数据
    init() {
      // 1. 获取接口
      let { catlist, top_playlist } = this.api;
      // 2. 获取歌单分类
      this.getsource(catlist).then(res => {
        console.log("歌单分类", res);
        this.tabbar = res.data.tags;
      });
      // 3. 默认加载第一个歌单分类下的歌单
      top_playlist.params = { cat: "华语", limit: 18 };
      this.getsource(top_playlist).then(res => {
        console.log("华语歌单", res);
        this.tabbar_detail = res.data.playlists;
      });
    },
    // 点击分类选项卡
    topcat(curcat) {
      let { top_playlist } = this.api;
      top_playlist.params = { cat: curcat, limit: 18 };
      this.getsource(top_playlist).then(res => {
        // console.log("点击切换歌单", res);
        this.tabbar_detail = res.data.playlists;
      });
    }
  },
  created() {
    this.init();
  },
  // 轮播图的组件
  components: {
    zeroHeader,
    zeroTabbar
  }
};
</script>

<style lang='scss' scoped>
$zerocolor: #d43c33;
$fontcolor: #333;
.recommend {
  width: 100%;
  .zerotabbar {
    position: absolute;
    top: 45px;
    bottom: 0;
  }
}
</style>